<template>
  <div>
      <el-container class="form-container">
          <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                  <span>&nbsp;</span>
                  <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;" @click="submitForm">保存</el-button>
              </div>
              <div >
                <el-form 
                  :model="form"
                  :rules="rules"
                  ref="form"
                  label-width="60px" 
                  label-position="left"
                >
                  <el-row>
                    <el-col :span="24">
                      <el-form-item  label="标题" prop="fdName">
                        <el-input class="input" v-model="form.fdName"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-divider></el-divider>
                    <form-builder ref="formBuilder" v-model="form.fdValue" :buildData="form.fdContent" v-if="itemList.length>0"/>
                  </el-form>
              </div>
          </el-card>
      </el-container>
    </div>
</template>

<script>
import formUtils from '@/utils/formUtils';
export default {
  name:'fancyFormDesigner',
  data() {
    return{
      form: {
        fdId:'',
        fdName: '',
        fdTemplateId:'',
        fdTemplateName:'',
        fdContent:'',
        fdValue:''
      },
      rules:{
        fdName:[
          { required: true, message: '标题不能为空',trigger:'blur'}
        ]
      }
    }
  },
  components:{
  },
  computed:{
    itemList(){
      if(this.form.fdContent!==''){
        const form = JSON.parse(this.form.fdContent);
        return form.list;
      }else{
        return [];
      }
    }
  },
  methods: {
    initParam(){
      if(formUtils.isNotEmpty(this.$route.query.fdId)){ //编辑页面
        const fdId = this.$route.query.fdId;
        this.$fetch('/api/sys/form/sys_form_main',{
          id:fdId
        }).then((res) => {
          formUtils.convertToForm(res.data,this.form);
        });
      }else{//新建页面
        this.form.fdTemplateId = this.$route.query.fdTemplateId;
        this.$fetch('/api/sys/form/sys_form_template/getFormConfig',{
          id:this.form.fdTemplateId
        }).then((res) => {
          if(res.status == 1){
            this.form.fdContent = res.data;
          }
        });
      }
    },
    submitForm() {
      const promiseForm = this.$refs.formBuilder.handlerSubForm();
      Promise.all([promiseForm]).then(()=>{
        this.$refs.form.validate((v)=>{
          if(v){
            // this.fullscreenLoading = true;
            let forms = formUtils.convertToModel(this.form);
            this.$put('/api/sys/form/sys_form_main',forms).then((res) => {
              this.fullscreenLoading = false;
              if(res.status==1){
                this.$message({
                  message: res.message,
                  type: 'success',
                  onClose:()=>{
                    this.$common.closeTag();
                  }
                });
              }else{
                this.$message.error(res.message);
              }
            });
          }
        });
      })
      
      
    }
  },
  mounted(){
    this.initParam();
  },
  watch:{
    'form.fdValue'(newVal){
      console.log(newVal);
    }
  }
}
</script>

<style scoped>
@import "~@/assets/css/form.css";
.container{
  width: 100%;
}
.breadcrumb{
  height:15px;
  margin-top:45px;
  margin-bottom: 10px;
}
.el-tabs--border-card .el-tabs__content{
  padding: 0px;
}

</style>